<template>
  <div class="Antenna">
    <el-card class="box-card">
      <el-button type="primary" class="Addantenna" plain @click="Addantenna()"
        >{{$t("message.center.dialogtitle.addantennas")}}</el-button
      >
      <template>
        <el-table
          :data="antennads"
          style="width: 100%"
          scope.row
          :default-sort="{ prop: 'name', order: 'descending' }"
        >
          <el-table-column
            v-for="(item, index) in tableheadr"
            :label="item"
            sortable
            width="180"
            :key="index"
            :prop="index"
          >
          </el-table-column>
          <el-table-column
            prop="action"
            class="action"
            :label="$t('message.center.antenna.table.action')"
          >
            <template slot-scope="scope" class="action">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                <i>
                  <img
                    src="../../../../assets/config/center/download.png"
                    alt=""
                  />
                </i>
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <div>
      <el-dialog
       :title='$t("message.center.dialogtitle.addantennas")'
        :visible.sync="dialogFormVisible"
        width="450px"
      >
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.antenna.table.name')"
            prop="name"
          >
            <el-select v-model="form.name" @change="hadlename()">
              <el-option label="9363上星" value="9363上星"></el-option>
              <el-option label="上星" value="上星"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.table.satellite_name')"
            prop="satellite_name"
          >
            <el-input disabled v-model="form.satellite_name"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.table.beam_name')"
            prop="beam_name"
          >
            <el-input
              v-model.number="form.beam_name"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.aperture')"
            prop="aperture"
          >
            <el-select v-model="form.aperture">
              <el-option
                v-for="(item, index) in antennaaperture"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
              <!-- <el-option label="0.5" value="0.5" ></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.gt')"
            prop="gt"
          >
            <el-input
              v-model.number="form.gt"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.gain')"
            prop="gain"
          >
            <el-input
              v-model.number="form.gain"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_gain')"
            prop="buc_gain"
          >
            <el-input
              v-model.number="form.buc_gain"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_power')"
            prop="buc_power"
          >
            <el-input
              v-model.number="form.buc_power"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_freq')"
            prop="buc_freq"
          >
            <el-input
              v-model.number="form.buc_freq"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.lnb_freq')"
            prop="lnb_freq"
          >
            <el-input
              v-model.number="form.lnb_freq"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >{{$t("message.center.buttom.confirm")}}</el-button
            >
            <el-button @click="resetForm('form')">{{$t("message.center.buttom.reset")}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog :title='$t("message.center.dialogtitle.updataantennas")' :visible.sync="updatadialog" width="450px">
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.antenna.table.name')"
            prop="name"
          >
            <el-select v-model="updatadialogdata.name" @change="hadlename()">
              <el-option label="9363上星" value="9363上星"></el-option>
              <el-option label="上星" value="上星"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.table.satellite_name')"
            prop="satellite_name"
          >
            <el-input
              disabled
              v-model="updatadialogdata.satellite_name"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.antenna.table.beam_name')"
            prop="beam_name"
          >
            <el-input
              v-model.number="updatadialogdata.beam_name"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.aperture')"
            prop="aperture"
          >
            <el-select v-model="updatadialogdata.aperture">
              <el-option
                v-for="(item, index) in antennaaperture"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
              <!-- <el-option label="0.5" value="0.5" ></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.gt')"
            prop="gt"
          >
            <el-input
              v-model.number="updatadialogdata.gt"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.gain')"
            prop="gain"
          >
            <el-input
              v-model.number="updatadialogdata.gain"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_gain')"
            prop="buc_gain"
          >
            <el-input
              v-model.number="updatadialogdata.buc_gain"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_power')"
            prop="buc_power"
          >
            <el-input
              v-model.number="updatadialogdata.buc_power"
              maxlength="10"
              :value="updatadialogdata.buc_power"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.buc_freq')"
            prop="buc_freq"
          >
            <el-input
              v-model.number="updatadialogdata.buc_freq"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.antenna.table.lnb_freq')"
            prop="lnb_freq"
          >
            <el-input
              v-model.number="updatadialogdata.lnb_freq"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modification()">{{$t("message.center.buttom.confirm")}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
      
<style scoped>
.box-card {
  width: 100%;
  height: 760px;
  margin: 0px 20px 0px 20px;
}
.Antenna {
  width: 100%;
  height: 760px;
  display: flex;
  overflow: hidden;
}
/* table头 */
.cell {
  font-size: 11px;
  font-weight: 800;
}
button.el-button.el-button--danger.el-button--mini {
  border: none;
  padding: 3px;
  background-color: #4e6d9d;
  /* margin-bottom: 79px; */
  /* top: auto; */
  /* margin-top: -32px; */
  position: absolute;
}
button.el-button.el-button--default.el-button--mini {
  padding: 0px;
  border: none;
}
.Addantenna {
  background-color: #4e6d9d;
  color: white;
  /* height: 28px; */
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
  position: relative;
  /* left: -698px; */
  margin-bottom: 10px;
  /* text-align: left; */
}
.el-input {
  width: 220px;
}
</style>
<script>
import { mapState } from "vuex";
export default {
  name: "samantenna",

  data() {
    var name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择所属卫星"));
      } else {
        callback();
      }
    };
    var satellite_name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择上行所属卫星"));
      } else {
        callback();
      }
    };
    var beam_name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入波束"));
      } else {
        callback();
      }
    };
    var aperture = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("请选择天线口径"));
      } else {
        callback();
      }
    };
    var gt = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("请输入GT值"));
      }
      setTimeout(() => {
        console.log(Number.isInteger(value));
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var gain = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入增益"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var buc_gain = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入BUC增益"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var buc_power = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入BUC饱和发送功率"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var buc_freq = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入BUC本振频率"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var lnb_freq = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入LNB本振频率"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      antennaaperture: [
        "0.5",
        "0.6",
        "0.9",
        "1.2",
        "1.8",
        "2.4",
        "3.7",
        "4.5",
        "7.3",
        "9",
      ],
      rules: {
        name: [{ validator: name, trigger: "blur" }],
        satellite_name: [{ validator: satellite_name, trigger: "blur" }],
        beam_name: [{ validator: beam_name, trigger: "blur" }],
        aperture: [{ validator: aperture, trigger: "blur" }],
        gt: [{ validator: gt, trigger: "blur" }],
        gain: [{ validator: gain, trigger: "blur" }],
        buc_gain: [{ validator: buc_gain, trigger: "blur" }],
        buc_power: [{ validator: buc_power, trigger: "blur" }],
        buc_freq: [{ validator: buc_freq, trigger: "blur" }],
        lnb_freq: [{ validator: lnb_freq, trigger: "blur" }],
      },
      text: "",
      tableheadr: {
        name: this.$t("message.center.antenna.table.name"),
        satellite_name: this.$t("message.center.antenna.table.satellite_name"),
        beam_name: this.$t("message.center.antenna.table.beam_name"),
        aperture: this.$t("message.center.antenna.table.aperture"),
        gt: this.$t("message.center.antenna.table.gt"),
        gain: this.$t("message.center.antenna.table.gain"),
        buc_gain: this.$t("message.center.antenna.table.buc_gain"),
        buc_power: this.$t("message.center.antenna.table.buc_power"),
        buc_freq: this.$t("message.center.antenna.table.buc_freq"),
        lnb_freq: this.$t("message.center.antenna.table.lnb_freq"),
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      updatadialog: false,
      updatadialogdata: {},
      form: {
        name: "",
        satellite_name: "",
        beam_name: "",
        aperture: "",
        gt: "",
        gain: "",
        buc_gain: "",
        buc_power: "",
        buc_freq: "",
        lnb_freq: "",
      },
      formLabelWidth: "120px",
    };
  },

  computed: {
    antennads() {
      // this.$store.getters.
      console.log(this.$store.state.samantenna.antennadata);
      console.log(this.$store.getters.antennaDataTableList);   
      return this.$store.getters.antennaDataTableList;
    },
  },
  methods: {
    hadlename() {
      if (this.form.name != "") {
        console.log(1);
        if (this.form.name === "9363上星") {
          this.form.satellite_name = "9363";
          this.updatadialogdata.satellite_name = "9363";
        } else {
          this.form.satellite_name = this.form.name;
          console.log(this.updatadialogdata.satellite_name);
          this.updatadialogdata.satellite_name = this.form.name;
          console.log(this.updatadialogdata.satellite_name);
        }
      }
      if (this.updatadialogdata.name !== "") {
      }
      if (this.updatadialogdata.name === "9363上星") {
        this.updatadialogdata.satellite_name = "9363";
      } else {
        this.updatadialogdata.satellite_name = this.updatadialogdata.name;
      }
    },
    formatter(row, column) {
      return row.address;
    },
    modification() {
      console.log(this.updatadialogdata);
      this.updatadialog = false;
      this.$store.commit("updataantennadata", this.updatadialogdata);
      this.$store.dispatch("updataantennas", this.updatadialogdata);
    },
    handleEdit(index, row) {
      this.updatadialogdata = row;
      this.updatadialog = true;
    },
    handleDelete(index, row) {
      this.$store.dispatch("deleteantennas",row.id)
    },
    Addantenna() {
      // 弹出addantenna的dialog
      this.dialogFormVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(2);
          console.log(this.form);
          this.$store.commit("setAddsubmitdata", this.form);
          let Adddatareturned = this.$store.getters.antennaSubmitDate;
          this.$store.dispatch("addantennas", Adddatareturned);
          this.dialogFormVisible = false;
          this.$message({
            message: "添加天线成功",
            type: "success",
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>